<div [@flyIn]="'active'">
  <div class="wrapper-sm">
    <div class="panel panel-default m-b-n-xs" style="border-radius:5px">
      <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >
        <div class="m-t-xs m-t-sm">
          <span>{{'devrepair.head.LEFT_TITLE1'|translate}}</span>
          <i class="fa fa-angle-right"></i>
          <span>{{'devrepair.head.LEFT_TITLE2'|translate}} </span>
        </div>
      </div>
    </div>
  </div>
  <div class="wrapper-sm">
    <div class="panel panel-default m-t-n-xs m-b-n-xs" style="border-radius:5px;">

      <div class="panel panel-default" style="margin-bottom:-5px;border-radius:5px">
        <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >
          <form class="form-inline row ">
            <app-select (search)="oo=$event;getData()"></app-select>

            <a routerLink="neworder" class="btn btn-sm btn-default pull-right">{{'devrepair.head.DOWN_BUTTON'|translate}}</a>

          </form>

        </div>
      </div>
    </div>
  </div>

  <div class="wrapper-sm" style="font-size:12px">
    <div class="panel panel-default" style="border-radius:5px">
      <div class="panel-body" >
        <table  class="table table-hover table-striped m-b-none default footable " style="font-size: 12px;">
          <thead>
          <tr>
            <th  style="width:10%">{{'devrepair.table_header.WORK_ORDER'|translate}}</th>
            <th  style="width:10%">{{'devrepair.table_header.DEVNO'|translate}}</th>
            <th  style="width:10%">{{'devrepair.table_header.DEVNAME'|translate}}</th>
            <th  style="width:15%">{{'devrepair.table_header.ALARMTIME'|translate}}</th>
            <th  style="width:10%">{{'devrepair.table_header.ALARMTYPE'|translate}}</th>
            <th  style="width:15%">{{'devrepair.table_header.ALARMSTATUS'|translate}}</th>
            <th  style="width:10%">{{'devrepair.table_header.ORDERSTATUS'|translate}}</th>
            <th  style="width:20%">{{'devrepair.table_header.OPERATION'|translate}}</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let aaData of data">
            <td>
              <a [routerLink]="['orderdetail',aaData.id]">
                <span style="color: blue">{{aaData.id}}</span>
              </a>
            </td>
            <td>
              <a [routerLink]="['../../../../archives/info/deviceinfo','none']">
                <span style="color: blue">{{aaData.mac}}</span>
              </a>
            </td>
            <td>{{aaData.device_name}}</td>
            <td>{{aaData.created}}</td>
            <td *ngIf="aaData.type==0">自动报警</td>
            <td *ngIf="aaData.type==1">手动报警</td>
            <td>
              <a style="margin-right:5px;color:#56abe4" *ngIf="aaData.step>=1"><i class="icon iconfont icon-yijie" tooltip="{{tool.yijiejingTooltip}}"></i></a>
              <a style="margin-right:5px;color:gray" *ngIf="aaData.step<1"><i class="icon iconfont icon-yijie" tooltip="{{tool.yijiejing1Tooltip}}"></i></a>
              <a style="margin-right:5px;color:#56abe4" *ngIf="aaData.step>=2&&aaData.daochang==1"><i class="icon iconfont icon-shuniu1" tooltip="{{tool.daochangTooltip}}"></i></a>
              <a style="margin-right:5px;color:orange" *ngIf="aaData.step>=2&&aaData.daochang==0"><i class="icon iconfont icon-shuniu1" tooltip="{{tool.daochang1Tooltip}}"></i></a>
              <a style="margin-right:5px;color:gray" *ngIf="aaData.step<2"><i class="icon iconfont icon-shuniu1" tooltip="{{tool.daochang2Tooltip}}"></i></a>
              <a style="color:#56abe4" *ngIf="aaData.step>=3"><i class="icon iconfont icon-yiqueren" tooltip="{{tool.yiquerenTooltip}}"></i></a>
              <a style="color:gray" *ngIf="aaData.step<3"><i class="icon iconfont icon-yiqueren" tooltip="{{tool.yiqueren1Tooltip}}"></i></a>
            </td>
            <td *ngIf="aaData.status==1">报警</td>
            <td *ngIf="aaData.status==2">接警</td>
            <td *ngIf="aaData.status==3 && aaData.daochang==1">到场</td>
            <td *ngIf="aaData.status==3 && aaData.daochang==0">不用到场</td>
            <td *ngIf="aaData.status==4">完工</td>
            <td *ngIf="aaData.status==5">恢复</td>
            <td *ngIf="aaData.status==6">确认</td>
            <td *ngIf="aaData.status==7">自动确认</td>
            <td *ngIf="aaData.status==8">撤销</td>

            <td>
              <span *ngIf="aaData.status==5||aaData.status==8">

                <a style="margin-right:5px;color:gray;"><i class="icon iconfont icon-jiejing" tooltip="{{tool.jiejingTooltip}}" style="font-size:18px"></i></a>

                <a><i class="icon iconfont icon-jie" style="margin-right:5px;color:gray;font-size:18px" tooltip="{{tool.wangongTooltip}}"></i></a>

                <a tooltip="{{tool.querenTooltip}}"><i class="icon iconfont icon-wancheng" style="margin-right:5px;color:gray;font-size:18px"></i></a>

                <a><i class="icon iconfont icon-quxiao" style="margin-right:5px;color:gray;font-size:18px" tooltip="{{tool.chexiaogongdanTooltip}}" ></i></a>

                <a>
                  <span  class="icon iconfont icon-shanchu" style="margin-right:5px;color:#eb4f38;font-size:18px" tooltip="{{tool.shanchugongdanTooltip}}" (click)="delorder(aaData.id)">
                  </span>
                </a>
              </span>

              <span *ngIf="aaData.status!=5 && aaData.status!=8">
                <a [routerLink]="['receive',aaData.id]" style="margin-right:5px;color:#11cd6e;" *ngIf="aaData.status<2" ><i class="icon iconfont icon-jiejing" tooltip="{{tool.jiejingTooltip}}" style="font-size:18px"></i></a>

                <a style="margin-right:5px;color:gray;" *ngIf="aaData.status>=2"><i class="icon iconfont icon-jiejing" tooltip="{{tool.jiejingTooltip}}" style="font-size:18px"></i></a>

                <a [routerLink]="['complete',aaData.id]" *ngIf="aaData.status<4 && aaData.status>=2 " ><i class="icon iconfont icon-jie" style="margin-right:5px;color:#11cd6e;font-size:18px" tooltip="{{tool.wangongTooltip}}" ></i></a>

                <a *ngIf="aaData.status>=4||aaData.status<2" ><i class="icon iconfont icon-jie" style="margin-right:5px;color:gray;font-size:18px" tooltip="{{tool.wangongTooltip}}"></i></a>

                <a [routerLink]="['confirm',aaData.id]" *ngIf="aaData.status<6 && aaData.status>=4"><i class="icon iconfont icon-wancheng" style="margin-right:5px;color:#11cd6e;font-size:18px" tooltip="{{tool.querenTooltip}}"></i></a>
                <a *ngIf="aaData.status==6 || aaData.status<4" tooltip="{{tool.querenTooltip}}"><i class="icon iconfont icon-wancheng" style="margin-right:5px;color:gray;font-size:18px"></i></a>


                <a [routerLink]="['revoke',aaData.id]" *ngIf="aaData.status!=8 && aaData.status!=6 "><i class="icon iconfont icon-quxiao" style="margin-right:5px;color:#f4c600;font-size:18px" tooltip="{{tool.chexiaogongdanTooltip}}" ></i></a>

                <a  *ngIf="aaData.status==8||aaData.status==6"><i class="icon iconfont icon-quxiao" style="margin-right:5px;color:gray;font-size:18px" tooltip="{{tool.chexiaogongdanTooltip}}" ></i></a>

                <a>
                  <span  class="icon iconfont icon-shanchu" style="margin-right:5px;color:#eb4f38;font-size:18px" tooltip="{{tool.shanchugongdanTooltip}}" (click)="item=aaData;myModal.show()">
                  </span>
                </a>
              </span>

            </td>
          </tr>
          </tbody>
        </table>


        <app-pagination [pageModel]="pageModel" (pageChanged)="page=$event;getData()"></app-pagination>

      </div>
    </div>
  </div>
</div>

<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">
            <p>删除维修工单</p>
          </h3>
        </div>
        <div class="modal-body">
          <div class="row">

              <alert type="danger">
              <h4>确定要删除工单<strong>{{ item?.id }}</strong>吗？<br/><br/>
                如果点击 删除按钮 后，将会把该条维修工单记录删除</h4>
              </alert>
            </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-danger" (click)="confirmDelete()" [disabled]="disabled">删除</button>
          <button class="btn btn-default" (click)="myModal.hide()">取消</button>
        </div>
      </div>

    </div>
  </div>
</div>


